/**
* @description: 城市定位
* @author: zhangxia
**/
<template>
  <div class="city-main">
    <nav-bar class="header" back title="山西省" @goBack="onCancel"/>
    <div class="main-container">
		<view class="commontitle">
			您所在的地区
		</view>
		<div class="commonbj">
      <img src="../../../static/controlImg/location2.png" alt="">
      {{cityName}}
		</div>
		<view class="commontitle">
			请选择目的地
		</view>
		<view class="citylist">
			<div class="commonbj" v-for="(item,index) in cityList" :key="index" @click="changeCity(item)">
				{{item.name}}
			</div>
		</view>
    </div>
  </div>
</template>

<script>

import navBar from "../../../components/common/nav-bar";

export default {
  name: "city",
  components: {navBar},
  props: {
	cityList: {
	  type: Array,
	  default: []
	},
	cityName:{
		type: String,
		default: '太原'
	}
  },
  watch: {
    // empty: {
    //   immediate: true,
    //   handler: function (newVal) {
    //     if(newVal) {
    //       this.value = "";
    //     }
    //   }
    // }
  },
  data() {
    return {
      value: ""
    }
  },
  methods: {
    changeCity(item){
		this.$emit("changeCity",item.name)
		this.onCancel()

	},
    onCancel(value) {
      this.$emit("cancel");
    },
  }
};
</script>

<style scoped lang="scss">
.city-main {
	height: 100vh;
	width: 100vw;
	background-color: #F2F6FA;
	overflow: hidden;
	.main-container{
		padding: px2vh(30) 0;
		box-sizing: border-box;
	}
	.commontitle{
		color: #666666;
		margin: px2vh(20) 0 px2vh(30) px2vh(30);
		font-size: px2vh(40);
	}
	.commonbj{
		width: px2vh(320);
		height:px2vh(120);
		background-color: #fff;
		color: #417ADC;
		text-align: center;
		line-height: px2vh(120);
		border-radius: px2vh(20);
		margin: px2vh(30) 0 px2vh(50) px2vh(30);
		font-size: px2vh(42);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: px2vw(34);
      height: px2vh(42);
      margin-right: px2vw(12);


    }
	}
	.citylist{
		width: calc(100% - 5%);
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-left: 5%;
		.commonbj{
			width: 30%;
			height:px2vh(120);
			margin-bottom: px2vh(30);
			text-align: center;
			line-height: px2vh(120);
			border-radius: px2vh(20);
			color: #333333;
			margin-right: 2.5%;
			margin-left:0;
		}
		.commonbj:nth-child(3n){
			margin-right: 0;
		}
	}
}

</style>
